<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vue router的props传参</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 导入vue-router文件,为全局的window对象挂载VueRouter构造函数 -->
    <script src="js/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-link to="/index/1">首页1</router-link>
      <router-link to="/index/2">首页2</router-link>
      <router-link to="/index/3">首页3</router-link>
      <router-link to="/keji">科技</router-link>
      <router-view></router-view>
    </div>
    <script>
      const Index = {
        props: ["id","username",'age'], //使用props接收路由参数
        template: `<h1>主页内容:编号值id:{{id}}---{{username}}-----{{age}}</h1>`,
      };

      const Keji = {
        template: `<h1>科技内容</h1>`,
      };

      //创建路由实例对象
      const router = new VueRouter({
        //配置路由的规则
        routes: [
          { path: "/", redirect: "/index/1" },
          //props设置为true,route.params将会被设置为组件属性
          { path: "/index/:id", component: Index, props: {username:'haoren',age:22} },
          { path: "/keji", component: Keji },
        ],
      });

      //1. 实例化一个Vue的实例
      let vm = new Vue({
        el: "#app",
        data: {},
        //挂载路由对象
        router: router,
      });
    </script>
  </body>
</html>
